Easy Menu Manager

Documentation

• Created: 08/13/2011
• By: gawibowo
• http://gawibowo.com

Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here:
http://codecanyon.net/user/gawibowo
Thanks so much!

Installation

Server Requirements:

• PHP: at least PHP 5.2
  This application uses json_encode() function that was added in PHP 5.2. If you still use php 5.0.x or 5.1.x, you can use a third party script for json_encode(), for example this one.
• MySQL: at least MySQL 4.x

Upload Files

Extract the main zip file, and then upload the easymenu folder to your server.

Configuration File

Open config.php file and edit these values:

// Base URL
define('_BASE_URL', 'http://yoursite.com/easymenu/');

// Database Connection Settings
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', 'password');
define('DB_NAME', 'easymenu');

// Admin Login
define('ADMIN_USER', 'admin');
define('ADMIN_PASS', 'mypassword');

Database Setup

• Create a database in mysql, I suggest using phpMyAdmin.
• In your phpMyAdmin, type your database name in the Create new database field, and click Create.
• After database created, click on the Import menu, browse install directory, select easymm.sql (if you want to install database + sample data) or easymm-empty.sql (if you want to install database without sample data).
• Click Go to import the sql file.
• Your database should be installed now.

Database Structure

The database has 2 tables: menu and menu_group.

• menu (7 fields):
  • id: the ID of the menu, added automatically.
  • parent_id: the "parent" ID of the menu. If a menu is in top level, the value of this field should be 0.
  • title: the title of the menu.
  • url: the url of the menu. can be full url (with http prefix) or relative url.
  • class: the class attribute of the <li> element. With a class attribute, the menu can be styled easily, for example if you want to add an icon beside the menu title.
  • position: this field is for ordering menu. The menu should be ordered based on the group and this field.
  • group_id: the ID of the menu group this menu belongs to.
• menu_group (2 fields):
  • id: the ID of the menu group, added automatically.
  • title: the title of the menu group.

If you rename the tables or fields, you must change the table and field names configuration in the config.php

// Tables Settings
define('MENU_TABLE', 'menu');
define('MENUGROUP_TABLE', 'menu_group');

// Fields Settings
define('MENU_ID', 'id');
define('MENU_PARENT', 'parent_id');
define('MENU_TITLE', 'title');
define('MENU_URL', 'url');
define('MENU_CLASS', 'class');
define('MENU_POSITION', 'position');
define('MENU_GROUP', 'group_id');

Directory and File Structure

• includes: for classes/libraries and functions
  • db.php: class for database operations
  • functions.php: for global functions
  • tree.php: class for generating nested lists
• install: contains sql files. Can be deleted if your application has been installed.
• modules: for controller files
  • home.php: controller for showing menu preview
  • menu.php: controller for menu manager
  • menu_group.php: controller for menu group actions
  • user.php: controller for login and logout user
• templates: for template/view files
  • css: this directory contains 4 css files:
    • home.css: used in public preview, contains styles for dropdown menu (horizontal and vertical)
    • login.css: used in login form
    • reset.css: css reset file
    • style.css: used in menu manager
  • images: directory for storing images
  • js: this directory contains 5 javascript files:
    • html5.js: to enable html 5 in IE browser
    • interface-1.2.js & inestedsortable.js: jQuery nested sortables plugin
    • jquery.1.4.1.min.js: jQuery javascript framework
    • menu.js: scripts for menu manager
  • home.php: view for public preview
  • login.php: view for login form
  • menu.php: view for menu manager
  • menu_edit.php: view for edit menu form
  • menu_group_add.php: view for add menu group form
• config.php: configuration file
• index.php: the front controller

URL Structure

This application uses a framework with this url structure:

index.php?act=controller.method

For example: index.php?act=news.detail&id=1
This url means the application will search file in modules/news.php, and the method detail inside this file will be executed

PHP Libraries

These are the php class libraries used in this application:

DB

include _DOC_ROOT . 'includes/db.php';

$db = new DB;

//connect to database
$db->Connect('localhost', 'root', 'pass', 'dbname');

//execute a delete query
$db->Execute("DELETE FROM account WHERE id = 15");

//get multi rows result from a SELECT query, return an array
$data = $db->GetAll("SELECT * FROM account LIMIT 10");
print_r($data);

//get one result from a SELECT query, return a string
$name = $db->GetOne("SELECT name FROM account WHERE id = 1");
echo $name;

//get one row result from a SELECT query, return an array
$row = $db->GetRow("SELECT username, password, name FROM account WHERE id = 1");
print_r($row);

//get one column from a SELECT query, return an array
$username = $db->GetCol("SELECT username FROM account ORDER BY id LIMIT 10");
print_r($username);

//quick insert from an array data
$data['username'] = 'myusername';
$data['password'] = '123456';
$data['name'] = 'My Name';
$data = $db->insert('account', $data);

//quick update from an array data
$data['username'] = 'user';
$data['password'] = 'admin';
$data['name'] = 'My Real Name';
$data = $db->update('account', $data, 'id = 1');

Tree

include _DOC_ROOT . 'includes/tree.php';
$tree = new Tree;
$tree->add_row(1, 0, '', 'Menu 1');
$tree->add_row(2, 0, '', 'Menu 2');
$tree->add_row(3, 1, '', 'Menu 1.1');
$tree->add_row(4, 1, '', 'Menu 1.2');
echo $tree->generate_list();

<ul>
    <li>Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>Menu 1.2</li>
        </ul>
    </li>
    <li>Menu 2</li>
</ul>

Menu Manager Operations

With your browser, open this url: index.php?act=menu to access the menu manager
This page contains many menu operations using ajax, so you can manage menu easily

Add Menu

To add a menu, go to Add Menu form, enter your menu title (required), url and class. Click Add Menu button, your new menu should appear in the list.

Sort Menu

The menu list can be sorted easily using drag-and-drop.

Edit Menu

From the menu list, click the edit menu icon, a modal box will appear showing edit menu form. Click Save to update the changes.

Delete Menu

Click the delete icon to delete menu. If the menu have descendants, all of the descendants will also be deleted.

Menu Group

In the top of menu list, there is a list of menu groups. Click on the + link to add a menu group.

You can edit and delete the current current menu group from the Current Menu Group box in the above Add Menu form

Please note, if you delete a menu group, all of menus under that group will also be deleted.
This application needs at least 1 group, so the menu group with id 1 cannot be deleted.

Displaying Menu

If you have finished adding menus in menu manager, now you have the menu data ready to be displayed. This is an example of how to create controller and view to display the menu in public.

• Create a controller file:

  modules/test.php:

  <?php
  class Test extends GController {
  	function index() {
  		//your code right here
  	}
  }
  

  The main script for generating menu is as simple as this:

  $this->easymenu($group_id, $attributes);
  

  Method easymenu is declared in class GController, so this method can be called from any controller that extends GController. This method will generate html list including link (<ul>, <li>, <a>) with nested structure.

  • $group_id
    The first argument is the menu group ID. You can get the $group_id from the menu manager, in the sidebar "Current Menu Group".
  • $attributes
    The second argument is the html attributes of the first <ul> element. This is useful if you want to style the menu with a class or id attribute.

  For example, you want to display two groups of menu (top menu with a group ID = 1, and side menu with a group ID = 2), the full controller should be like this:

  <?php
  class Test extends GController {
  	function index() {
  		$data['topmenu'] = $this->easymenu(1, 'class="horizontal white"');
  		$data['sidemenu'] = $this->easymenu(2, 'class="vertical white"');
  		$this->view('test', $data);
  	}
  }
  

• Create a view file for displaying the menu. A view file is a html file with variables extracted from the controller.

  templates/test.php:

  <!DOCTYPE HTML>
  <html lang="en">
  	<head>
  		...
  	</head>
  	<body>
  		<header>
  			<?php echo $topmenu; ?>
  		</header>
  		<section>
  			<?php echo $sidemenu; ?>
  		</section>
  		...
  	</body>
  </html>
  

• Access from this url:

  http://yoursite.com/easymenu/index.php?act=test

  Now you should see the 2 groups of menu displayed. The final output should be something like this:

  <!DOCTYPE HTML>
  <html lang="en">
  	<head>
  		...
  	</head>
  	<body>
  		<header>
  			<ul class="horizontal white">
  				<li><a href="/">Home</a></li>
  				<li><a href="/about.html">About</a>
  					<ul>
  						<li><a href="/company-profile.html">Company Profile</a></li>
  					</ul>
  				</li>
  				<li><a href="/products">Products</a>
  					<ul>
  						<li><a href="/products/handicraft">Handicraft</a></li>
  						<li><a href="/products/furniture">Furniture</a></li>
  					</ul>
  				</li>
  				<li><a href="/blog">Blog</a></li>
  			</ul>
  		</header>
  		<section>
  			<ul class="vertical white">
  				<li><a href="/author-dashboard">Author Dashboard</a></li>
  				<li><a href="/member/profile">My Profile</a></li>
  				<li><a href="/member/settings">Settings</a>
  					<ul>
  						<li><a href="/member/settings/password">Change Password</a></li>
  					</ul>
  				</li>
  				<li><a href="/logout.php">Logout</a></li>
  			</ul>
  		</section>
  		...
  	</body>
  </html>
  

Sources and Credits

• jQuery
  http://jquery.com/
• NestedSortables
  http://code.google.com/p/nestedsortables/
  jQuery framework plugins which provide a way to sort and nest elements in web applications, using drag-and-drop 
• Fugue Icons
  http://p.yusukekamiyamane.com/